<template>
  <form>
    <div class="flex flex-between input_item">
      <label for="">公司名称</label>
      <input v-model="formData.name" name="input" placeholder="请输入公司名称" />
    </div>
    <div class="flex  flex-between input_item">
      <label for="">主营业务</label>
      <input v-model="formData.mainProduct" name="input" placeholder="请输入主营业务" />
    </div>
    <div class="flex input_item">
      <label for="">所在地区</label>
      <input v-model="formData.province" name="input" placeholder="请输入所在地区" />
    </div>
    <div class="flex input_item">
      <label for="">官网</label>
      <input v-model="formData.websiteUrl" name="input" placeholder="请输入主营业务" />
    </div>
    <div class="flex input_item">
      <label for="">座机</label>
      <input v-model="formData.phone" name="input" placeholder="请输入主营业务" />
    </div>
    <div class="flex input_item">
      <label for="">地址</label>
      <input v-model="formData.address" name="input" placeholder="请输入主营业务" />
    </div>
    <div class="flex input_item">
        <label for="">类型</label>
      <radio-group class="radio-group" @change="radioChange">
        <label class="radio" v-for="item in typeList" :key="item.id">
          <radio :value="item.id" />{{item.name}}
        </label>
      </radio-group>
    </div>
    <button @click="formSubmit">保存</button>

  </form>
</template>

<script>
  export default {
    data() {
      return {
        formData: {
          address: "",
          city: "",
          contact: "",
          id: 0,
          mainProduct: "",
          name: "",
          phone: "",
          province: "",
          remark: "",
          tel: "",
          websiteUrl: ""
        },
        typeList: [{ name: "公司", id: 1 }, { name: "个人", id: 2 }]
      };
    },
    methods: {
      formSubmit() {
        console.log("点击保存",this.$router);
        var msg=1
          // this.$router.push({path:'/pages/hello/main',query:{msg}})
      },
      radioChange() {
        console.log(111);
      }
    }
  };
</script>

<style scoped>
  .card {
    padding: 10px;
  }

  form {
    width: 100%;
    padding: 10px;
    font-size: 14px;
  }

  .input_item {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15px;
    align-items: center;
  }

  .input_item input {
    border: 1px solid #eee;
    flex: 3;
    padding: 5px 0 5px 10px;
    margin-left: 10px;
  }
  .radio-group{
    flex: 3;
    padding: 5px 0 5px 10px;
    margin-left: 10px;
  }

  .input_item>label {
    text-align: right;
    flex: 1;
  }
</style>
